<template>
	<div class="v-business">
		<el-row class="wrapNav" v-for="(item,i) in busDataTitle " :key="item.id">
			<el-col :span="24" style="display: flex;" ref="rowHeight">
				<el-col :span="2" class="chooseNav" style="height: 100%;">
					<h3>{{item.title}}</h3>
				</el-col>
				<el-col :span="22" class="listNav" :ref="item.radio" style="display: flex;align-items: center;">
					<el-radio-group  v-model="itemRadio[i]" @change="radioCheck(i)">
						<!--:label="itemList.city?itemList.city:itemList" -->
						<el-radio-button :label="itemList.city?itemList.city:itemList" v-for="(itemList,index) in item.list" :key="index">
							{{itemList.city?itemList.city:itemList}}
							<!-- v-if="itemList.city"-->
							<!-- <i :class="itemList.city?itemList.city:itemList == arrRadio[i]?'el-icon-circle-close':''"  @click="dle(i,arrRadio[i])"></i> -->
							<!-- <i v-else :class="itemList == arrRadio[i]?'el-icon-circle-close':''"  @click="dle(i,arrRadio[i])"></i> -->
						</el-radio-button>
					</el-radio-group>
				</el-col>
			</el-col>
		</el-row>
		<div style="background: #fff;height: 15px;"></div>



		<!-- 再次点击取消当前选择示例 -->
		<!-- <el-radio-group v-model="test">
			<el-radio-button @click.native.prevent="clickitem(3)" :label="3">备选项<i class="el-icon-circle-close" v-if="test==3" style="margin-left: 3px;"></i></el-radio-button>
			<el-radio-button @click.native.prevent="clickitem(6)" :label="6">备选项<i class="el-icon-circle-close" v-if="test==6" style="margin-left: 3px;"></i></el-radio-button>
			<el-radio-button @click.native.prevent="clickitem(9)" :label="9">备选项<i class="el-icon-circle-close" v-if="test==9" style="margin-left: 3px;"></i></el-radio-button>
		</el-radio-group> -->
		<!-- 再次点击取消当前选择---循环 -->
		<!-- <el-radio-group v-model="itemRadio[i]" @change="radioCheck(i)" v-for="(item,i) in busDataTitle " :key="item.id">
			<el-radio-button :label="itemList.city?itemList.city:itemList" v-for="(itemList,index) in item.list" :key="index" @click.native.prevent="clickitem(i,itemList.city?itemList.city:itemList)">
			{{itemList.city?itemList.city:itemList}}<i class="el-icon-circle-close"></i>
			</el-radio-button>
		</el-radio-group> -->
	</div>
</template>

<script>
	export default {
		props: ["busDataTitle"],
		data() {
			return {
				itemRadio: [],
				selectRadio: [],
				test: "",	//测试单选框
				arrRadio:[],
			}
		},
		methods: {
			// 循环单选框点击函数方法
			// clickitem(i,name) {
			// 	console.log(i+"========="+name)
			// 	var busDataTitle = this.busDataTitle
			// 	var itemRadio = this.itemRadio
			// 	if(i == 0){
			// 		console.log(busDataTitle[i].list)
			// 		for (var k = 0; k < busDataTitle[i].list.length; k++) {
			// 			// console.log()
			// 			// e === this.test ? this.test = '' : this.test = e
			// 		}
			// 	}
				
			// 	// e === this.test ? this.test = '' : this.test = e
			// },
			dle(i,val){
				// let that = this;
				// let selectRadio = that.selectRadio //所需要传的值
				console.log("shanchu")
				//this.selectRadio.splice(this.selectRadio.findIndex(item => item.id === (i+1)),1)
				//this.itemRadio.splice(this.itemRadio.findIndex(item => item === val),1)
				
			},
			radioCheck(i) {
				// console.log(this.itemRadio)
				var busDataTitle = this.busDataTitle // 获取传进来的数据
				var cityNum = null; //城市的识别码
				var selectNum = null; //选中的下标码	
				var itemRadio = this.itemRadio //选中的value值
				var selectRadio = this.selectRadio //所需要传的值
				var item = "";
				this.arrRadio[i] = itemRadio[i];
				if (i == 0) {
					for (let k = 0; k < busDataTitle[i].list.length; k++) {
						if (busDataTitle[i].list[k].city == itemRadio[0]) {
							cityNum = busDataTitle[i].list[k].cityCode
						}
					}
					item = {
						id: busDataTitle[i].id,
						key: busDataTitle[i].title,
						value: itemRadio[i],
						cityCode: cityNum
					};
					
				} else {
					for (let a = 0; a < busDataTitle[i].list.length; a++) {
						if (busDataTitle[i].list[a] == itemRadio[i]) {
							selectNum = a +1
						}
					}
					item = {
						id: busDataTitle[i].id,
						key: busDataTitle[i].title,
						value: itemRadio[i],
						attrNum: selectNum
					};
				}
				if (selectRadio.length == 0) {
					selectRadio.push(item);
					this.$emit('sendSelectRad', selectRadio);
					return;
				}
				for (let j = 0; j < selectRadio.length; j++) {
					// console.log(selectRadio[j].id+"-----------"+item.id)
					if (selectRadio[j].id == item.id) {
						selectRadio[j].value = item.value;
						if (selectRadio[j].id == 1) {
							selectRadio[j].cityCode = item.cityCode;
						}
						if (selectRadio[j].id != 1) {
							selectRadio[j].attrNum = selectNum;
						}
						this.$emit('sendSelectRad', selectRadio);
						return
					}

				}
				selectRadio.push(item);
				this.$emit('sendSelectRad', selectRadio);
			},
		},
		mounted() {
			// 设置选择栏动态高度
			let height = this.$refs['rowHeight']
			for (var i = 0; i < height.length; i++) {
				$('.v-business .chooseNav').eq(i).css({
					paddingTop: (height[i].$el.clientHeight - 16) / 2,
					paddingBottom: (height[i].$el.clientHeight - 16) / 2
				})
			}
			var bat = this.busDataTitle // 获取传进来的数据
			bat.forEach(item => {
				this.arrRadio.push([]);
			})
			
		}

	}
</script>

<style>
	.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled){box-shadow: none;}
	
	.el-icon-circle-close{
		font-size: 18px;
	}
</style>
